<?php
/**
 * @version     kingadmin-v1.2-tx
 * @package     tpl_gpcb
 * @copyright   Copyright (C) 2014. All Rights Reserved
 * @license     Creative Commons Attribution-NoDerivatives 4.0 International License
 * @author      caballeroantonio <caballeroantonio@hotmail.com> - http://caballeroantonio.com
 */

// No direct access
defined('_JEXEC') or die;

$kbpath = 'templates/gpcb';
$this->document->page_class = 'flash-alert';
?>

							<div class="main-header">
								<h2>Flash Alert</h2>
								<em>Growl like pop up alert/notification</em>
							</div>

							<div class="main-content">
								<!-- FLASH MESSAGE WITH SOUND -->
								<div class="widget">
									<div class="widget-header">
										<h3><i class="fa fa-info-circle"></i> Gritter</h3> <em> - Growl like alert message with sound</em>
										<div class="btn-group widget-header-toolbar">
											<div class="control-inline toolbar-item-group">
												<span class="control-title"><i class="fa fa-bell"></i>Sound</span>
												<div class="control-inline onoffswitch">
													<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="gritter-sound-switch" checked="">
													<label class="onoffswitch-label" for="gritter-sound-switch">
														<div class="onoffswitch-inner"></div>
														<div class="onoffswitch-switch"></div>
													</label>
												</div>
											</div>
										</div>
									</div>
									<div class="widget-content">
										<div class="alert alert-warning alert-dismissable">
											<a href="" class="close">×</a>
											<strong>No Sound?</strong> Make sure you've enabled the setting on top bar (speaker icon).
										</div>
										<div class="row">
											<div class="col-md-4">
												<a id="gritter-regular" class="btn btn-lg btn-block btn-default btn-gritter" data-toggle="tooltip" data-original-title="fades out after certain amount of time.">Regular</a>
											</div>
											<div class="col-md-4">
												<a id="gritter-sticky" class="btn btn-lg btn-block btn-default btn-gritter" data-toggle="tooltip" data-original-title="will not fades out until user click the close button">Sticky</a>
											</div>
											<div class="col-md-4">
												<button id="gritter-image" class="btn btn-lg btn-block btn-default btn-gritter" data-toggle="tooltip" data-original-title="online/offline user notification">Notification With Image</button>
											</div>
										</div><br/>
										<div class="row">
											<div class="col-md-4">
												<button id="gritter-callback" class="btn btn-lg btn-block btn-default btn-gritter" data-toggle="tooltip" data-original-title="has callback: before_open, after_open, before_close, after_close">Callback</button>
											</div>
											<div class="col-md-4">
												<button id="gritter-max" class="btn btn-lg btn-block btn-default btn-gritter" data-toggle="tooltip" data-original-title="can be used to limit the number of maximum notification allowed">Limit Maximum Notification</button>
											</div>
											<div class="col-md-4">
												<button id="gritter-light" class="btn btn-lg btn-block btn-default btn-gritter" data-toggle="tooltip" data-original-title="light version">Light</button>
											</div>
										</div>
										<br />
										<div class="row">
											<div class="col-md-3">
												<button id="top-left" class="btn btn-lg btn-block btn-info btn-gritter-position btn-gritter" data-toggle="tooltip" data-original-title="set all the notifications on the top left"><span class="title">Top Left</span></button>
											</div>
											<div class="col-md-3">
												<button id="top-right" class="btn btn-lg btn-block btn-info btn-gritter-position btn-gritter" data-toggle="tooltip" data-original-title="set all the notifications on the top right"><span class="title">Top Right (Default)</span></button>
											</div>
											<div class="col-md-3">
												<button id="bottom-right" class="btn btn-lg btn-block btn-info btn-gritter-position btn-gritter" data-toggle="tooltip" data-original-title="set all the notifications on the bottom right"><span class="title">Bottom Right</span></button>
											</div>
											<div class="col-md-3">
												<button id="bottom-left" class="btn btn-lg btn-block btn-info btn-gritter-position btn-gritter" data-toggle="tooltip" data-original-title="set all the notifications the bottom left"><span class="title">Bottom Left</span></button>
											</div>
										</div>
									</div>
								</div>
								<!-- END FLASH MESSAGE WITH SOUND -->

							</div><!-- /main-content -->
						

	<!-- Javascript -->
	<script src="http://www.google.com/jsapi"></script>
	<script src="<?= $kbpath ?>/assets/js/jquery.gritter.min.js"></script>
	<script src="<?= $kbpath ?>/assets/js/king-elements.js"></script>
